<template>
	<el-drawer v-model="state.drawer" title="库存详情" size="85%" @close="closeDrawer">
		<!-- 基础 -->
		<div class="detail-info">
			<ewt-image :url="state.detailInfo.picUrl" style="width: 80px; height: 80px; cursor: pointer" />
			<!-- <div v-else class="non-pic">无图</div> -->
			<div class="detail-content">
				<div style="font-size: 16px; font-weight: 600">
					{{ state.detailInfo.skuName }}
				</div>
				<el-form>
					<el-row>
						<el-col :span="6">
							<el-form-item label="SKU:"
								><span style="color: #000">{{ state.detailInfo.skuCode }}</span></el-form-item
							>
						</el-col>
						<el-col :span="6">
							<el-form-item label="FNSKU:"
								><span style="color: #000">{{ state.detailInfo.fnskuCode }}</span></el-form-item
							>
						</el-col>
						<el-col :span="6">
							<el-form-item label="MSKU:"
								><span style="color: #000">{{ state.detailInfo.mskuCode }}</span></el-form-item
							>
						</el-col>
						<!-- <el-col :span="6">
							<el-form-item label="品名:">{{state.detailInfo.skuName}}</el-form-item>
						</el-col> -->
						<el-col :span="6">
							<el-form-item label="主体公司:"
								><span style="color: #000">{{ state.detailInfo.companyName }}</span></el-form-item
							>
						</el-col>
						<el-col :span="6">
							<el-form-item label="团队:"
								><span style="color: #000">{{ state.detailInfo.teamName }}</span></el-form-item
							>
						</el-col>
						<el-col :span="6">
							<el-form-item label="仓库:"
								><span style="color: #000">{{ state.detailInfo.whName }}</span></el-form-item
							>
						</el-col>
						<el-col :span="6">
							<el-form-item label="备货区域:"
								><span style="color: #000">{{ state.detailInfo.stockupAreaName }}</span></el-form-item
							>
						</el-col>
					</el-row>
				</el-form>
			</div>
		</div>
		<!-- 流水 -->
		<el-tabs v-model="state.activeName" @tab-change="handleChange">
			<el-tab-pane v-for="tab in state.headerTabsList" :key="tab.value" :label="tab.label" :name="tab.value"></el-tab-pane>
		</el-tabs>
		<!-- 搜索行 -->
		<div class="search-header">
			<!-- 单据类型 -->
			<FunctionalSelect
				v-if="state.activeName === '0'"
				style="margin-bottom: 10px"
				v-model="state.queryForm.billTypes"
				:optionFormat="{
					key: 'code',
					label: 'name',
				}"
				useRadio
				:options="state.billTypeList"
				placeholder="单据类型"
				@query-list="handleSearch($event, 'billTypes')"
				class="ml10 w180"
			/>
			<!-- 出入类型 -->
			<el-select
				v-if="state.activeName === '1'"
				style="width: 100px"
				v-model="state.inOutType"
				placeholder="出入库类型"
				@change="toGetData"
				clearable
				class="ml10 w180"
			>
				<el-option v-for="item in state.inOutTypesList" :key="item.value" :label="item.label" :value="item.value"></el-option>
			</el-select>
			<!-- 业务类型 -->
			<FunctionalSelect
				v-if="state.activeName === '1'"
				style="margin-bottom: 10px"
				v-model="state.queryForm.busTypes"
				:optionFormat="{
					key: 'id',
					label: 'name',
				}"
				useRadio
				:options="state.busTypesList"
				placeholder="业务类型"
				@query-list="handleSearch($event, 'busTypes')"
				class="ml10 w180"
			/>
			<!-- 供应商 -->
			<FunctionalSelect
				style="margin-bottom: 10px"
				v-model="state.queryForm.supplierIds"
				:optionFormat="{
					key: 'supplierId',
					label: 'supplierName',
				}"
				useRadio
				:options="state.supplierList"
				placeholder="供应商"
				@query-list="handleSearch($event, 'supplierIds')"
				class="ml10 w180"
			/>
			<!-- 操作时间 -->
			<date-picker-with-prefix
				style="margin-bottom: 10px; width: 300px; display: inline-flex"
				class="ml10 w180"
				:options="state.datePickerOptions"
				@change="changeDataRange"
				ref="datePickerRef"
			/>
			<!-- 采购单号 -->
			<ComboSearch
				v-if="state.activeName === '0'"
				class="ml10 w180"
				style="width: 300px"
				:options="state.comboSearchOpt"
				:prefixSelect="'purchaseOrderCode'"
				@search="handleComboSearch($event, 'skuSearchDto')"
				ref="comboSearchRef"
			/>
			<ComboSearch
				v-if="state.activeName === '1'"
				class="ml10 w180"
				style="width: 300px"
				:options="state.comboSearchOpt1"
				:prefixSelect="'purchaseOrderCode'"
				@search="handleComboSearch($event, 'skuSearchDto')"
				ref="comboSearchRef"
			/>
		</div>
		<whsFlowList
			v-if="state.activeName === '0'"
			:queryForm="state.queryForm"
			:billTypeList="state.billTypeList"
			:inventoryMoveTypeList="state.inventoryMoveTypeList"
			:effectInventoryTypeList="state.effectInventoryTypeList"
			ref="whsFlowListRef"
		/>
		<batchFlowList v-if="state.activeName === '1'" :queryForm="state.queryForm" :busTypesList="state.busTypesList" ref="batchFlowListRef" />
	</el-drawer>
</template>
<script setup lang="tsx" name="proDetail">
import { ElMessage } from 'element-plus';
import { getBillTypeMap, getBusTypeMap, getInventoryMoveTypeArray, getEffectInventoryTypeArray } from '/@/api/inventory/index';
import { searchBySupplierName } from '/@/api/product/auxiliaryMaterial';
const whsFlowList = defineAsyncComponent(() => import('./whsFlowList.vue'));
const batchFlowList = defineAsyncComponent(() => import('./batchFlowList.vue'));
const obj = {
	billTypes: [],
	supplierList: [],
	inOutTypes: [],
	busTypes: [],
	skuSearchDto: {
		searchFieldId: '',
		searchMode: '',
		searchValue: '',
		searchValueList: [],
	},
	startCreateTimestamp: '',
	endCreateTimestamp: '',
	skuId: '',
};
const state = reactive({
	drawer: false,
	detailInfo: {},
	activeName: '0',
	headerTabsList: [
		{ label: '库存流水', value: '0' },
		{ label: '批次流水', value: '1' },
	],
	inOutType: '',
	queryForm: Object.assign({}, obj),
	billTypeList: [],
	busTypesList: [],
	inventoryMoveTypeList: [],
	effectInventoryTypeList: [],
	supplierList: [],
	inOutTypesList: [
		{ label: '入库', value: '1' },
		{ label: '出库', value: '2' },
	],
	datePickerOptions: [{ label: '操作时间', value: 1 }],
	comboSearchOpt: [
		{ label: '采购单号', key: 'purchaseOrderCode' },
		{ label: '关联单据号', key: 'associateOrderCode' },
		{ label: '操作人', key: 'createBy' },
		{ label: '操作详情', key: 'operateDetail' },
	],
	comboSearchOpt1: [
		// { label: '业务单据号', key: '1' },
		{ label: '出入库单号', key: 'inOutCode' },
		{ label: '采购单号', key: 'purchaseOrderCode' },
		{ label: '操作人', key: 'createBy' },
		{ label: '初始批次号', key: 'initBatchCode' },
		{ label: '仓库批次号', key: 'inventoryBatchCode' },
	],
});
const datePickerRef = ref();
const comboSearchRef = ref();

const whsFlowListRef = ref();
const batchFlowListRef = ref();
const toRefresh = () => {
	if (state.activeName === '0') {
		whsFlowListRef.value?.toRefresh();
	}
	if (state.activeName === '1') {
		batchFlowListRef.value?.toRefresh();
	}
};
const handleChange = () => {
	state.queryForm.skuSearchDto = JSON.parse(JSON.stringify(obj.skuSearchDto));
	// Object.keys(obj).forEach((i) => {
	// 	state.queryForm[i] = obj[i];
	// });
	comboSearchRef.value.resetFields();
};
const toGetData = (v) => {
	state.queryForm.inOutTypes = v ? [v] : [];
	toRefresh();
};
// 业务类型
const getBusTypeMapObj = async () => {
	const { data } = await getBusTypeMap();
	state.busTypesList = data;
};
// 单据类型
const getBillTypeMapObj = async () => {
	const { data } = await getBillTypeMap();
	state.billTypeList = data;
};
//库存动作
const getInventoryMoveTypeObj = async () => {
	const { data } = await getInventoryMoveTypeArray();
	state.inventoryMoveTypeList = data;
};
//影响库存类型
const getEffectInventoryTypeObj = async () => {
	const { data } = await getEffectInventoryTypeArray();
	state.effectInventoryTypeList = data;
};
const handleSearch = (ids: string[], type) => {
	state.queryForm[type] = ids;
	toRefresh();
};
const changeDataRange = (val: unknown, v2: string[]) => {
	if (val === 1) {
		state.queryForm.startCreateTimestamp = v2[0] ? v2[0] + ' 00:00:00' : '';
		state.queryForm.endCreateTimestamp = v2[1] ? v2[1] + ' 23:59:59' : '';
	} else {
		state.queryForm.startCreateTimestamp = '';
		state.queryForm.endCreateTimestamp = '';
	}
	toRefresh();
};
// 供应商
const getSupplierList = async () => {
	const { data } = await searchBySupplierName();
	state.supplierList = data;
};
const openDrawer = (row) => {
	state.drawer = true;
	state.detailInfo = row;
	state.queryForm.skuId = row.skuId;
	getSupplierList();
	getBusTypeMapObj();
	getBillTypeMapObj();
	getInventoryMoveTypeObj();
	getEffectInventoryTypeObj();
};
const closeDrawer = () => {
	state.drawer = false;
};
const handleComboSearch = (ids, type) => {
	state.queryForm[type] = {};
	const { key, like, value } = ids;
	state.queryForm[type].searchFieldId = key;
	state.queryForm[type].searchValue = like;
	state.queryForm[type].searchValueList = value;
	state.queryForm[type].searchMode = value.length ? 'mode_in' : 'mode_like';

	toRefresh();
};
defineExpose({
	openDrawer,
	closeDrawer,
});
</script>
<style lang="scss" scoped>
.detail-info {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-bottom: 16px;
	// border-bottom: 1px solid rgba(11, 16, 25, 0.15);
	margin-bottom: 20px;
}
.detail-content {
	flex: 1;
}
.non-pic {
	width: 80px;
	height: 80px;

	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(11, 16, 25, 0.05);
	border: 1px solid rgba(0, 0, 0, 0.03);
	color: rgba(11, 16, 25, 0.12);
	border-radius: 2px;
}
:deep(.comboSearch) {
	display: inline-flex;
}
</style>
